<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车界面</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/util.js"></script>
    <script>
        window.onload=function (){
            showShop();
        }
        async function showShop(){
            let info =await ajaxGet("/shop/findByUser");
            let str ="";
            let total=0;
            for (let i = 0; i < info.length; i++) {
                let obj=info[i];
                str += `<tr><td>${obj.product.name}</td>
                <td>${obj.product.price}</td>
                <td>${obj.product.origin}</td>
                <td><input type="text" onblur="updateNum(${obj.id},this.value)" value="${obj.num}"></td>
                <td>${obj.num * obj.product.price}</td>
                <td><a href="javascript:del(${obj.id})">移除商品</a></td></tr>`;
                total += obj.product.price * obj.num;
            }
            $("data").innerHTML=str;
            $("totalSpan").innerHTML=total;
        }

        /**
         * 移除商品
         * @param id
         * @returns {Promise<void>}
         */
        async function del(id){
            let info =await ajaxGet("/shop/del",{id});
               if (info == "ok"){
                   showShop();
               }
        }

        async function updateNum(id,num){
            let info =await ajaxGet("/shop/update",{id,num});
            if (info == "ok"){
                showShop();
            }
        }
        async function addOrder(){
            location.href="/html/custom/addOrder.html?totalPrice="+$("totalSpan").innerHTML;
        }

    </script>
</head>
<body>
    <h2>你的购物车有如下商品</h2>
    <table border="1" cellspacing="0" width="60%">
        <thead><tr><th>商品名</th><th>单价</th><th>产地</th><th>购买数量</th><th>单项总价</th><th>操作</th></tr></thead>
        <tbody id="data"></tbody>
    </table>
    购物车总价：￥<span id="totalSpan"></span><br>
    <div>
        <a href="/html/index.html" style="margin-right: 100px">继续购物</a>
        <a href="javascript:addOrder()">结账</a>
    </div>
</body>
</html>